{# This form is "included" into other .html files. #}

<script type="text/javascript" src="{{ url_for('static', filename='js/dict-tabs.js') }}" charset="utf-8"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/lute-hotkey-utils.js') }}" charset="utf-8"></script>
<script type="text/javascript">
  /**
   * Sometimes this file is included within the context of base.html
   * which already defines these two global vars, but other times it
   * is shown standalone.
   *
   * The typeof check ensures that we only load the const once,
   * avoiding "Identifier 'LUTE_USER...' has already been declared'
   * errors.
   */
  if (typeof LUTE_USER_SETTINGS === "undefined") {
    const LUTE_USER_SETTINGS = {{ user_settings | safe }};
  }
  if (typeof LUTE_USER_HOTKEYS === "undefined") {
    window.LUTE_USER_HOTKEYS = {{ user_hotkeys | safe }};
  }
</script>


{% if duplicated_term %}
{#
  Duplicated term, only show a link to that term.
  See DUPLICATE_TERM_CHECK comments in other files.
#}
<div class="flash-notice-narrow">
  Term <a href="/term/edit/{{ duplicated_term.id }}">{{ duplicated_term.text }}</a> already exists.
</div>
{% else %}
  {% for field_name, field_errors in form.errors.items() %}
  {% for error in field_errors %}
  <div class="flash-notice-narrow">{{ error }}</div>
  {% endfor %}
  {% endfor %}
{% endif %}


<div id="term-form-container">
  <form id="term-form" name="term_form" method="POST"
        onsubmit="return convert_pending_parent_tags(event);">
    {{ form.hidden_tag() }}
    <div id="term">
      <div id="languageSel"
        {% if term.language_id is none %}
        {# show the language select box. #}
        {% else %}
        style="display:none;"
        {% endif %}>
        {{ form.language_id(class="form-control") }}
        <button id="load-dicts-btn" title="Load dictionaries for the new term" type="button"></button>
      </div>
  
      {{ form.original_text }}

      <div>{{ form.text(class="form-control", value=(form.original_text.data or '')) }}</div>

      <div>{{ form.parentslist(class="form-control") }}</div>
  
      <div {% if hide_pronunciation %}style="display:none;"{% endif %}>
        {{ form.romanization(class="form-control") }}
      </div>

      <div id="translation-container">
        <div>{{ form.translation }}</div>
        <img {% if term.current_image %}style="grid-column: -1; display: block"{% endif %} 
             class="zoomableTermImage"
             id="term_image"
             tabindex="0"
             src="/userimages/{{ term.language_id or 0 }}/{{ form.current_image.object_data or '-' }}"
             onclick="clicked_zoomable_image(this);"
             />
      </div>

      <div id="status-container">
        {{ form.status(class="form-control") }}
        <div id="sync-status-container">
          {{ form.sync_status(class="form-control", disabled=True) }}
          <label for="sync_status">Link to parent</label>
        </div>
      </div>

      <div style="display: none">{{ form.current_image(class="form-control") }}</div>

      <div>{{ form.termtagslist(class="form-control") }}</div>

      <div id="term-button-container">
          {% if term.id %}
          <button id="delete" type="button" class="btn" onclick="deleteTerm()">Delete</button>
          {% endif %}
          <button id="btnsubmit" type="submit" title="Shortcut: Control+Enter" class="btn btn-primary">Save</button>
      </div>
    </div>
  </form>
</div>


<script type="text/javascript" src="/static/js/never_cache/lute-tagify-utils.js" charset="utf-8"></script>


<script type="text/javascript">

  /** TERM IMAGE. ***************/

  var term_image = null;

  function clicked_zoomable_image(el) {
    // alert('clicked');
    $(el).toggleClass("clickedZoomableImage");
  }

  // The parent tag list, managed by tagify.
  // Global reference needed for runtime inspection of tag list.
  var parents_tagify = null;

  // TODO zzfuture fix: acceptance tests for all interactions

  // Monitor state of form change.
  let form_changed = false;

  $("form :input").change(function() {
      form_changed = true;
  });

  // Parents are in the tagify-managed #parentslist input box.
  let get_parents = function() {
    // During form load, and in "steady state" (i.e., after the tags
    // have been added or removed, and the focus has switched to
    // another control) the #sync_status text box is loaded with the
    // values.
    const pdata = $('#parentslist').val();
    if ((pdata ?? '') == '') {
      return [];
    }
    const j = JSON.parse(pdata);
    const parents = j.map(e => e.value);
    return parents;
  };

  let enable_disable_sync_status_checkbox = function() {
    const cb = $("#sync_status");
    if (get_parents().length == 1)
      cb.removeAttr("disabled");
    else
      cb.attr("disabled", true);
  };

  var TAGS = {{ tags | safe }};

  $(document).ready(function () {

    // "Save" shortcut
    $(document).keydown(function(event) {
      if (get_hotkey_name(event) == "hotkey_SaveTerm") {
        $("#btnsubmit").click();
      }
    });

    // Term image events.
    var term_image = $("#term_image");

    term_image.hover(
      function(){ $(this).attr("title", "Click and hit Delete to remove, then Save."); },
      function(){ $(this).removeClass('clickedZoomableImage') }
    );

    term_image.on("keydown", function(event) {
      if (term_image.hasClass("clickedZoomableImage")) {
        const k = event.key;
        if (k === "Delete" || k === "Backspace") {
          // Hide image on screen.
          term_image.attr("src", "");
          term_image.css("display", "none");
          // Erase hidden form control value.
          $("#current_image").val("");
        }
      }
    });

    var parentslist = document.getElementById('parentslist');
    const this_term_text = $("#original_text").val();
    const lang_id_func = () => parseInt($('#language_id').val());
    let override_settings = {
      placeholder: 'Parents',
    };
    parents_tagify = lute_tagify_utils_setup_parent_tagify(
      parentslist, lang_id_func, this_term_text, override_settings
    );

    parents_tagify.on('click', function (e) {
      // Exit early if language not set - will not handle, too complicated.
      const langid = document.getElementById("language_id").value;
      const clickedTagText = e.detail.data.value;
      if (langid === "0" || clickedTagText === '') {
        return;
      }

      if (form_changed) {
        const msg = 'You have unsaved changes.  Click OK to save these changes and go to the parent term, or Cancel to continue editing.';
        if (!confirm(msg))
          return;
      }

      const in_reading_frame = ("{{ embedded_in_reading_frame }}" == "True");
      let url = `/term/editbytext/${langid}/${clickedTagText}`;
      if (in_reading_frame) {
        url = `/read/termform/${langid}/${clickedTagText}`;
      }

      // Manually post, tell the reading screen to update, then go to the url.
      const frm = $('#term-form');
      const formData = frm.serialize();
      $.post(frm.attr('action'), formData, function(response) {
        window.parent.postMessage({ event: "LuteTermFormPosted" }, "*");
        window.location.href = url;
      });
    });

    parents_tagify.on('add remove', function (e) {
      // The #parents_list text box isn't changed consistently
      // during events, so we have to check the tagify var
      // itself, which has an accurate list of current tags.
      // console.log(e);
      // console.log(e.detail);
      const single_parent = (parents_tagify.value.length == 1);
      const cb = $("#sync_status");
      cb.prop("checked", single_parent);
      if (single_parent)
        cb.removeAttr("disabled");
      else
        cb.attr("disabled", true);

      // If adding a single parent, inherit its status.
      if (e.type == 'add' && single_parent) {
        if (e.detail && e.detail.data && e.detail.data.status) {
          const targetValue = e.detail.data.status;
          var radioButtons = document.getElementsByName('status');
          for (var i = 0; i < radioButtons.length; i++) {
            if (radioButtons[i].value == targetValue) {
              // console.log(`found at i = ${i}`);
              radioButtons[i].checked = true;
              break;
            }
          }
        }
      }
    });

    var termtagslist = document.getElementById('termtagslist');
    const overrides = {
      placeholder: 'Tags'
    };
    var termtags_tagify = lute_tagify_utils_setup_term_tag_tagify(
      termtagslist, TAGS, overrides
    );
    
    // Post message re form opened.
    // Note have to use this rather than the better
    // this.dispatchEvent(new Event("termFormOpened"));
    // because this form is opened in a frame.
    window.parent.postMessage({ event: "LuteTermFormOpened" }, "*");

    enable_disable_sync_status_checkbox();
  });  // end $(document).ready


  // =============================
  // Submit.

  // Users may enter in a parent term without actually hitting return
  // in the tag input box, resulting in nothing getting posted.  This
  // is annoying, so convert any pending text into a full tag before
  // submitting.
  function convert_pending_parent_tags(event) {
    const pending_tag = $('span.tagify__input').text().trim();
    if (pending_tag == '')
      return true;
    // console.log(`adding: ${pending_tag}`);

    // Simply calling "addTags" is not enough, as there appears to be
    // some kind of async processing and timing in that method.  We
    // have to listen to the 'add' event, and only submit once that is
    // called.
    parents_tagify.on('add', onFinalTagAdded);

    // Add the pending tag, and suppress the actual submit.
    parents_tagify.addTags([pending_tag], true, false);
    event.preventDefault();
    return false;
  }


  // If some extra text has been added, wait for processing to be
  // done, and then submit the form.
  function onFinalTagAdded(e) {
    // console.log('Tag added:', e.detail.data.value);

    // We still have to wait for data to be fully processed :-(
    const DELAY = 150;  // ms
    setTimeout(function() {
      const form = $('#term-form');
      form[0].submit();
    }, DELAY);

    parents_tagify.off('add', onFinalTagAdded);  // clean up listener.
  }


  // =============================
  // Delete.

  function deleteTerm() {
    const msg = "Are you sure you want to delete this term?\n\n" +
          "This action cannot be undone, and if this term has children, they will be orphaned.";
    if (!confirm(msg))
      return;

    $.post("/term/delete/{{ term.id }}", function( data ) {
      if ("{{ embedded_in_reading_frame }}" == "True") {
        window.parent.postMessage({ event: "LuteTermFormPosted" }, "*");
        window.parent.document.getElementById('wordframeid').src = 'about:blank';
      }
      else {
        // If on term page, go to term listing
        window.location.href = '/term/index';
      }
    });
  }

</script>
